<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue案例之计数器</title>
</head>

<body>

  <div id="app">
    <h3>当前数值: {{ counter }}</h3>
    <!-- <button v-on:click="counter++">+</button> -->
    <!-- <button v-on:click="counter--">-</button> -->

    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
  </div>

  <script src="../../js/vue.js"></script>
  <script>
    // 1. 旧方法实现计数器步骤列举
    /* 
        1) 拿到html元素;
        2) 给元素绑定对应的监听事件;
        3) 在监听事件中写处理逻辑(变量修改、html元素展示替换等);
    */

    // 2. vue实现
    /* 
        1) 给DOM元素绑定点击事件;
        2) 编写处理函数;
    */
    const app = new Vue({
      el: '#app',
      data: {
        counter: 0
      },
      methods: {
        add: function () {
          console.log("正在执行+1");
          this.counter++;
        },
        sub: function () {
          if (this.counter > 0) {
            console.log("正在执行-1");
            this.counter--;
          } else {
            console.log("哎呦喂 您可别点了 这不都到0了嘛？");
          }
        }
      }
    })
  </script>
</body>

</html>